Mermaid Note⚓︎

使用mermaid的目的是为了给markdown笔记中的一些简单关系提供可视化方案，但是由于过度丰富的图形和markdown速记的理念是违背的，因此不对于高级的使用进行过多的阐述，只是简单的记录一些基本用法

• References
  • Mermaid 从入门到精通 Zhihu
  • Mermaid Official Site
  • Mermaid中文网
  • Mermaid在线编辑器

基础语法练习⚓︎

Flowchart⚓︎

 graph LR
     A --> B
     B --> C
     C --> D 

 graph LR
     A --> B
     B --> C
     C --> D 

Sequence Diagram⚓︎

sequenceDiagram
   A->>B: Message 1
   B-->>A: Message 2

sequenceDiagram
   A->>B: Message 1
   B-->>A: Message 2

Gantt Chart⚓︎

gantt
   title Example Gantt Chart
   dateFormat  YYYY-MM-DD
   section Section
   task 1: 2019-01-01, 30d
   task 2: 2019-02-01, 14d
   task 3: 2019-03-01, 7d

gantt
   title Example Gantt Chart
   dateFormat  YYYY-MM-DD
   section Section
   task 1: 2019-01-01, 30d
   task 2: 2019-02-01, 14d
   task 3: 2019-03-01, 7d

Pie Chart⚓︎

pie
   title Example Pie Chart
   "First slice": 30
   "Second slice": 20
   "Third slice": 50

 pie
   title Example Pie Chart
   "First slice": 30
   "Second slice": 20
   "Third slice": 50 

Radar Graph⚓︎

radar-beta
  axis m["Math"], s["Science"], e["English"]
  axis h["History"], g["Geography"], a["Art"]
  curve a["Alice"]{85, 90, 80, 70, 75, 90}
  curve b["Bob"]{70, 75, 85, 80, 90, 85}
  
  max 100
  min 0

Obsidian 不支持

高级语法练习⚓︎

graph and subgraph⚓︎

graph LR
    A --> B
    B --> C
    C --> D

    subgraph Subgraph A
        B1 --> C1
        C1 --> D1
    end

    subgraph Subgraph B
        B2 --> C2
        C2 --> D2
    end

  graph LR
    A --> B
    B --> C
    C --> D

    subgraph Subgraph A
        B1 --> C1
        C1 --> D1
    end

    subgraph Subgraph B
        B2 --> C2
        C2 --> D2
    end

Pie⚓︎

pie
  title Example Pie Chart
  "Apples" : 45.0
  "Oranges" : 25.0
  "Bananas" : 15.0
  "Grapes" : 10.0
  "Pears" : 5.0

Style关键字语法⚓︎

style <shape-id> <style-attr>:<style-value>[;<style-attr>:<style-value>]...

其中 \<shape-id> 是形状的ID，而 \<shape-attr> 是样式属性， \<style-value> 是样式属性的值。可以为形状设置多个样式属性，多个样式属性之间用分号 ; 分隔。

graph LR;
  A[Square] --> B((Circle));
  C(Rectangle) --> D{Diamond};

  style A fill:#f9c;
  style B stroke:#333,stroke-width:4px;
  style C fill:#f96,stroke:#333,stroke-width:2px;
  style D fill:#fc9,stroke:#f63,stroke-width:4px,stroke-dasharray: 5 5;

  graph LR;
  A[Square] --> B((Circle));
  C(Rectangle) --> D{Diamond};

  style A fill:#f9c;
  style B stroke:#333,stroke-width:4px;
  style C fill:#f96,stroke:#333,stroke-width:2px;
  style D fill:#fc9,stroke:#f63,stroke-width:4px,stroke-dasharray: 5 5;

根据上面的例子，我们对A、B、C和D设置了不同的样式和颜色，其中 fill 设置形状的填充属性，而 stroke 样式属性设置形状的边框颜色，stroke-width 样式属性设置边框宽度，使用 stroke-dasharray 设置虚线的样式

更多的一些属性请参考官方文档

• font-size
• font-weight
• font-family
• text-align
• text-decoration
• etc

loop and alt⚓︎

• loop语法 用于定义一个循环块

loop [循环次数]
   [形状 1]
   [形状 2]
   ...
end

• alt语法 用于定义一个条件块，根据条件选择不同的路径

alt [条件 1]
   [路径 1]
else if [条件 2]
   [路径 2]
else
   [路径 3]
end